<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/resources/template/template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:hr="http://java.sun.com/jsf/composite/autocomplete"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:f="http://java.sun.com/jsf/core">


    <ui:define name="content">

        <h:panelGroup >
            <h:form  >

                <h:panelGrid columns="2" >
                    <h:outputLabel value="Staff Name"/>
                    <p:autoComplete  forceSelection="true" value="#{staffPaySheetComponentController.current.staff}"
                                     completeMethod="#{staffController.completeStaffCode}" var="mys" itemLabel="#{mys.person.nameWithTitle}" itemValue="#{mys}"
                                     converter="stfcon"   >   
                        <f:ajax event="itemSelect" execute="@this" render="tb6 stfCode stfCode2"  />
                        <p:column headerText="Name">
                            #{mys.person.name}
                        </p:column>
                        <p:column headerText="Code">
                            #{mys.code}
                        </p:column>
                    </p:autoComplete>
                    <p:outputLabel value="Emp Code"></p:outputLabel>
                    <p:outputLabel id="stfCode" value="#{staffPaySheetComponentController.current.staff.code}"></p:outputLabel>
                    <p:outputLabel value="EPF Code"></p:outputLabel>
                    <p:outputLabel id="stfCode2" value="#{staffPaySheetComponentController.current.staff.epfNo}"></p:outputLabel>
                    <h:outputLabel value="Component Name"/>
                    <p:selectOneMenu value="#{staffPaySheetComponentController.current.paysheetComponent}">                        
                        <f:selectItems value="#{staffPaySheetComponentController.compnent}"
                                       var="i"  itemLabel="#{i.name}" itemValue="#{i}"/>
                    </p:selectOneMenu>

                    <h:outputLabel value="From"/>
                    <p:calendar  navigator="true" value="#{staffPaySheetComponentController.current.fromDate}" pattern="dd MM yyyy">                            
                    </p:calendar>
                    <h:outputLabel value="To"/>
                    <p:calendar  navigator="true" value="#{staffPaySheetComponentController.current.toDate}" pattern="dd MM yyyy">                            
                    </p:calendar>                    
                    <h:outputLabel value="Value"/>
                    <p:inputText autocomplete="off" value="#{staffPaySheetComponentController.current.staffPaySheetComponentValue}"/>

                    <p:commandButton value="Add" action="#{staffPaySheetComponentController.save}" ajax="false" onclick="onSubmitButton();"/>
                    <p:commandButton value="Clear" action="#{staffPaySheetComponentController.makeItemNull}" ajax="false" onclick="onSubmitButton();"/>

                </h:panelGrid>

                <p:spacer height="30" />
                <p:panel >
                    <f:facet name="header" >   
                        <h:outputLabel value="Paysheet Component individual" style="text-transform:capitalize;" />

                    </f:facet>
                    <h:panelGrid columns="2" >
                        <h:outputLabel value="From : " />
                        <p:calendar navigator="true" value="#{staffPaySheetComponentController.fromDate}" pattern="dd MMMM yyyy hh:mm:ss a" />

                        <h:outputLabel value="Paysheet Component"/>
                        <p:selectOneMenu value="#{staffPaySheetComponentController.paysheetComponent}">                        
                            <f:selectItems value="#{staffPaySheetComponentController.compnent}"
                                           var="i"  itemLabel="#{i.name}" itemValue="#{i}"/>
                        </p:selectOneMenu>
                        <h:outputLabel value="Employee : "/>
                        <hr:completeStaff value="#{staffPaySheetComponentController.reportKeyWord.staff}"/>
                        <h:outputLabel value="Department : "/>
                        <hr:department value="#{staffPaySheetComponentController.reportKeyWord.department}"/>
                        <h:outputLabel value="institution : "/>
                        <hr:institution value="#{staffPaySheetComponentController.reportKeyWord.institution}"/>
                        <h:outputLabel value="Staff Category : "/>
                        <hr:completeStaffCategory value="#{staffPaySheetComponentController.reportKeyWord.staffCategory}"/>
                        <h:outputLabel value="Designation : "/>
                        <hr:completeDesignation value="#{staffPaySheetComponentController.reportKeyWord.designation}"/>
                        <h:outputLabel value="Roster : "/>
                        <hr:completeRoster value="#{staffPaySheetComponentController.reportKeyWord.roster}"/> 


                    </h:panelGrid>
                    <h:panelGrid columns="3">  
                        <p:commandButton ajax="false" value="Fill" action="#{staffPaySheetComponentController.createTable()}" />
                        <p:commandButton ajax="false" value="Excel" styleClass="noPrintButton" onclick="onSubmitButton();" >
                            <pe:exporter type="xlsx" target="tb6" fileName="hr_staff_paysheet_component_individual"  />
                        </p:commandButton>
                        <p:commandButton value="Print" ajax="false" action="#" >
                            <p:printer target="individualpanel" ></p:printer>
                        </p:commandButton>  </h:panelGrid>

                    <p:panel  id="individualpanel" styleClass="noBorder summeryBorder">
                        <p:dataTable id="tb6" value="#{staffPaySheetComponentController.items}" 
                                     filteredValue="#{staffPaySheetComponentController.filteredStaff}"
                                     var="i" editable="true" rowIndexVar="a" >

                            <f:facet name="header">
                                <h:outputLabel value="#{staffPaySheetComponentController.paysheetComponent.name}"/>
                            </f:facet>

                            <p:ajax event="rowEdit" listener="#{staffPaySheetComponentController.onEdit}" />  


                            <p:column headerText="No">
                                <f:facet name="header">
                                    <h:outputLabel value="No"/>
                                </f:facet>
                                <h:outputLabel value="#{a+1}" >
                                </h:outputLabel>
                            </p:column>

                            <p:column headerText="Institution" sortBy="#{i.staff.workingDepartment.institution.name}"  >
                                <f:facet name="header" >
                                    <h:outputLabel value="Institution"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.workingDepartment.institution.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="Department" sortBy="#{i.staff.workingDepartment.name}" >
                                <f:facet name="header" >
                                    <h:outputLabel value="Department"  />
                                </f:facet>

                                <h:outputLabel value="#{i.staff.workingDepartment.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="Roster"  >
                                <f:facet name="header">
                                    <h:outputLabel value="Roster"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.roster.name}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="EMP Code" sortBy="#{i.staff.codeInterger}" >
                                <f:facet name="header">
                                    <h:outputLabel value="EMP Code"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.code}" ></h:outputLabel>
                            </p:column>
                            <p:column headerText="From" >
                                <f:facet name="header">
                                    <h:outputLabel value="From"  />
                                </f:facet>

                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.fromDate}" >
                                            <f:convertDateTime pattern="dd MMMM yyyy"/>
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:calendar navigator="true" autocomplete="off" value="#{i.fromDate}">

                                        </p:calendar>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>

                            <p:column headerText="To" >
                                <f:facet name="header">
                                    <h:outputLabel value="To"  />
                                </f:facet>
                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.toDate}">
                                            <f:convertDateTime pattern="dd MMMM yyyy"/>
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:calendar navigator="true" autocomplete="off" value="#{i.toDate}">

                                        </p:calendar>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Grade" >
                                <f:facet name="header">
                                    <h:outputLabel value="Grade"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.grade.name}"/>                           
                            </p:column>

                            <p:column headerText="Category" >
                                <f:facet name="header">
                                    <h:outputLabel value="Category"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.staffCategory.name}"/>
                            </p:column>

                            <p:column headerText="Designtion" >
                                <f:facet name="header">
                                    <h:outputLabel value="Designtion"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.designation.name}"/>
                            </p:column>
                            <p:column headerText="Resign Date" >
                                <f:facet name="header">
                                    <h:outputLabel value="Resign Date"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.dateLeft}">
                                    <f:convertDateTime pattern="dd MMMM yyyy"/>
                                </h:outputLabel>
                            </p:column>
                            <p:column headerText="Staff" >
                                <f:facet name="header">
                                    <h:outputLabel value="Staff"  />
                                </f:facet>
                                <h:outputLabel value="#{i.staff.person.nameWithTitle}"/>
                            </p:column>

                            <p:column headerText="Component" rendered="false" >
                                <f:facet name="header">
                                    <h:outputLabel value="Component"  />
                                </f:facet>
                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.paysheetComponent.name}">
                                            <f:convertNumber pattern="#,##0.00" />
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:selectOneMenu value="#{i.paysheetComponent}">                        
                                            <f:selectItems value="#{staffPaySheetComponentController.compnent}"
                                                           var="ii"  itemLabel="#{ii.name}" itemValue="#{ii}"/>
                                        </p:selectOneMenu>                                  
                                    </f:facet>
                                </p:cellEditor>

                            </p:column>


                            <p:column headerText="Value" >
                                <f:facet name="header">
                                    <h:outputLabel value="Value"  />
                                </f:facet>
                                <p:cellEditor>  
                                    <f:facet name="output">
                                        <h:outputLabel value="#{i.staffPaySheetComponentValue}">
                                            <f:convertNumber pattern="#,##0.00" />
                                        </h:outputLabel>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText autocomplete="off" value="#{i.staffPaySheetComponentValue}"/>
                                    </f:facet>
                                </p:cellEditor>

                            </p:column>

                            <p:column style="width:6%"  exportable="false" styleClass="noPrintButton">  
                                <p:rowEditor />  
                            </p:column>  

                            <p:column style="width:6%" exportable="false" styleClass="noPrintButton">  
                                <p:commandButton ajax="false" value="Remove" action="#{staffPaySheetComponentController.remove}" onclick="onSubmitButton();">
                                    <f:setPropertyActionListener target="#{staffPaySheetComponentController.removingEntry}" value="#{i}" />
                                </p:commandButton>
                            </p:column>  


                        </p:dataTable>
                    </p:panel>
                </p:panel>
            </h:form>

        </h:panelGroup>

    </ui:define>

</ui:composition>
